<!DOCTYPE html>
<html ng-app="WebApp">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="css/angular-material.min.css">
    <link href="css/Material-Design-Icons/material-icons.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src="js/angular-1.4.8.min.js"></script>
    <script src="js/angular-animate.min.js"></script>
    <script src="js/angular-aria.min.js"></script>
    <script src="js/angular-messages.min.js"></script>
    <!-- Angular Material Library -->
    <script src="js/angular-material.min.js"></script>
</head>

<body ng-cloak ng-controller="mainCtrl">
    <md-toolbar layout="row">
        <md-button class="md-icon-button" aria-label="Settings" ng-click="toggleSidenav('sidernav-left')">
            <md-icon> list </md-icon>
        </md-button>
        <h2 class="md-toolbar-tools" layout-align-gt-sm="center">
          <span>管理后台</span>
        
        </h2>
        <md-button class="md-icon-button" aria-label="Favorite">
            <md-icon style="color: greenyellow;"> favorite </md-icon>
        </md-button>
        <md-button class="md-icon-button" aria-label="More">
            <md-icon> more_vert </md-icon>
        </md-button>
    </md-toolbar>

    <div layout="row" flex class="content-wrapper">
        <!-- <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="sidenav-left"> -->
        <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="sidernav-left" >
            <md-list>
                <md-list-item>
                    <md-icon class="md-default-theme" class="material-icons">home</md-icon>
                    <p>主页</p>
                    <md-icon class="md-secondary">2</md-icon>
                </md-list-item>
                 <md-divider></md-divider>
                 <md-subheader class="md-no-sticky">Pages</md-subheader>
            </md-list>
        </md-sidenav>
        
        <div layout="column" flex id="content">
            <md-content layout="column" flex class="md-padding">
            </md-content>
        </div>
    </div>

</body>

</html>
<script type="text/javascript">
/**
 * You must include the dependency on 'ngMaterial' 
 */
var app = angular.module('WebApp', ['ngMaterial']);
app.controller('mainCtrl', ['$scope', '$mdSidenav', '$mdUtil',function($scope, $mdSidenav, $mdUtil) {
    // $scope.toggleLeft = buildToggler('sidenav-left');

    // function buildToggler(navID) {
    //     var debounceFn = $mdUtil.debounce(function () {
    //         $mdSidenav(navID)
    //             .toggle()
    //     }, 100);
    //     return debounceFn;
    // }


    // $scope.toggleSidenav = function(menuId) {
    //     $mdSidenav(menuId).toggle();
    // };

    $scope.toggleSidenav = function(menuId) {
      var a=$mdSidenav(menuId);
      a.toggle();

            //a.toggle();

            // a.toggle = function() { a.toggle() };
            // a.close().then(function(){
            //   $log.debug('closed');
            //   return a.isOpen(); 
            // });
    };


}]);
</script>
